.checkbox-primary,
.radio-primary {
  @apply -flex -gap-1.5 -relative -min-h-[20px];
}
.checkbox-primary > input[type="checkbox"],
.radio-primary > input[type="radio"] {
  @apply -opacity-0 -absolute -inset-0;
}
.checkbox-primary > label,
.radio-primary > label {
  @apply -relative -cursor-pointer;
  padding-left: calc(var(--checkbox-size) + 8px);
}
.checkbox-primary > label::before,
.checkbox-primary > label::after,
.radio-primary > label::before,
.radio-primary > label::after {
  @apply -content-[''] -absolute -block -w-[--checkbox-size] -h-[--checkbox-size] --left-0 -transition-[transform,background-color,color,opacity];
  top: calc((20px - var(--checkbox-size)) / 2);
}

.checkbox-primary > label::before {
  @apply -border -rounded-sm -border-gray-400 -bg-canvas;
}
.checkbox-primary > label::after {
  @apply -scale-90;
  background-image: url("");
}
.radio-primary > label::before {
  @apply -border -rounded-full -border-gray-400;
}
.radio-primary > label::after {
  @apply  -bg-[--checkbox-color] -rounded-full -opacity-0;
  --checkbox-radio-size: calc(var(--checkbox-size) * 2 / 3);
  width: var(--checkbox-radio-size);
  height: var(--checkbox-radio-size);
  top: calc((20px - var(--checkbox-radio-size)) / 2);
  left: calc((var(--checkbox-size) - var(--checkbox-radio-size)) / 2);
}

.checkbox-primary > label:hover::before,
.radio-primary > label:hover::before {
  @apply -border-[--checkbox-color];
}
.checkbox-primary > input[type="checkbox"]:focus + label::before,
.checkbox-primary.focus > label::before,
.radio-primary > input[type="radio"]:focus + label::before,
.radio-primary.focus > label::before {
  @apply -outline -outline-focus -outline-2 -border-[--checkbox-color];
}
.checkbox-primary > input[type="checkbox"]:checked + label::before,
.checkbox-primary.checked > label::before {
  @apply -border-[--checkbox-color] -bg-[--checkbox-color];
}
.radio-primary > input[type="radio"]:checked + label::before,
.radio-primary.checked > label::before {
  @apply -border-[--checkbox-color];
}
.checkbox-primary > input[type="checkbox"]:checked + label::after,
.checkbox-primary.checked > label::after,
.radio-primary > input[type="radio"]:checked + label::after,
.radio-primary.checked > label::after {
  @apply -opacity-100;
}
.checkbox-primary > input[type="checkbox"]:disabled + label,
.checkbox-primary.disabled > label,
.radio-primary > input[type="radio"]:disabled + label,
.radio-primary.disabled > label {
  @apply -grayscale -opacity-70 -cursor-not-allowed -pointer-events-none;
}

.checkbox-primary.indeterminate > label::after,
.checkbox-primary > input[type="checkbox"]:indeterminate + label::after {
  @apply -opacity-100 -bg-[--checkbox-color] -bg-none -border-canvas;
  border-width: calc((var(--checkbox-size) - 2px) / 2) 2px;
}
